<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>浮动案例</title>
  <style>
    /* reset css */
    * {
      margin: 0;
      padding: 0;
    }

    body {
      font: 14px / 1.5 Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, sans-serif;
      color: #333;
      background-color: #fff;
      line-height: 1.5;
    }

    img {
      vertical-align: middle;
    }

    ul li {
      list-style: none;
    }

    a {
      text-decoration: none;
    }

    .cf::after {
      content: '';
      display: block;
      clear: both;
    }

    .fl {
      float: left;
    }

    .fr {
      float: right;
    }

    .m-r10 {
      margin-right: 10px;
    }

    .m-t10 {
      margin-top: 10px;
    }

    .m-b10 {
      margin-bottom: 10px;
    }

    .m-auto {
      margin: 0 auto;
    }

    /* main */
    .main {
      width: 960px;
      background-color: #ccc;
    }

    .header {
      /* height: 80px; */
    }

    .logo {
      height: 80px;
      width: 200px;
      background-color: red;
    }

    .banner1 {
      width: 540px;
      height: 80px;
      background-color: green;
    }

    .banner2 {
      width: 200px;
      height: 80px;
      background-color: blue;
    }



    .menu {
      height: 30px;
      background-color: darkmagenta;
    }

    .content {
      height: 410px;
    }

    .group-one {
      height: 410px;
      width: 370px;
      background-color: rgb(152, 185, 218);
    }

    .column1 {
      width: 370px;
      height: 200px;
      background-color: aquamarine;
    }

    .column2 {
      width: 180px;
      height: 200px;
      background-color: rgb(32, 29, 138);
    }


    .group-two {
      height: 410px;
      width: 370px;
      background-color: rgb(128, 187, 56);
    }

    .group-three {
      height: 410px;
      width: 200px;
      background-color: rgb(213, 63, 148);
    }

    .group-three ul li {
      width: 200px;
      height: 130px;
      background-color: rgb(218, 57, 35);
    }

    .group-three ul li:nth-child(n+2) {
      margin-top: 10px;
    }

    .footer {
      height: 60px;
      background-color: gold;
    }
  </style>


</head>

<body>

  <div class="main m-auto">
    <div class="header cf">
      <div class="logo fl m-r10"></div>
      <div class="banner1 fl"></div>
      <div class="banner2 fr"></div>
    </div>
    <div class="menu m-t10"></div>
    <div class="content cf m-t10">

      <div class="group-one fl m-r10 cf">

        <div class="column1 fl m-b10"></div>
        <div class="column2 fl"></div>
        <div class="column2 fr"></div>
      </div>
      <div class="group-one fl m-r10 cf">

        <div class="column1 fl m-b10"></div>
        <div class="column2 fl"></div>
        <div class="column2 fr"></div>
      </div>
      <div class="group-three fr">
        <ul>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>

    </div>
    <div class="footer m-t10"></div>
  </div>

</body>

</html>